import { css } from "@emotion/react"
import styled from "@emotion/styled"
import FormItemMap from "./components/form_item_map"
import ButtonRegular from "@/components/composite/ButtonRegular/main"
import { kycForm } from "@/forms"
import Markdown from "react-markdown"
import McReminder from "@/assets/docs/kyc_reminder.md?raw"
import { CustomError } from "@/utils/error"
import { createLogger } from "@/utils/logger"
import { useEffect } from "react"
import { computed } from "@preact/signals"
import KycPageSignals from "@/features_signal/kycPageSignals"

const logger = createLogger("StepKycCompleteForm")

const Container = styled.div`
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    font-family: "Gilroy";
    background: #f2f2f3;
    gap: 8rem;
    overflow-y: scroll;
    position: relative;
`

const SubmitButton = styled(ButtonRegular)``

export default function StepKycCompleteForm() {
    const status = KycPageSignals.currentStatus.peek()
    const sourceData = KycPageSignals.sourceData.peek()
    const methods = kycForm.useFormContext()

    useEffect(() => {
        KycPageSignals.fetchKyc()
    }, [])

    useEffect(() => {
        return () => {
            methods.setError("root", {
                message: "",
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const isSubmitShow = computed(() => {
        switch (status) {
            case "unset":
            case "draft":
            case "rejected":
                return true
            default:
                return false
        }
    })

    return (
        <Container>
            <FormSection title="Basic Information">
                <FormItemMap.IdType disabled={!!sourceData.kyc?.id_type} />
                <FormItemMap.FrontPhotoOfId />
                {/* <FormItemMap.FacePhoto /> */}
                <FormItemMap.SelfieWithCard />
                <FormItemMap.FirstName />
                <FormItemMap.MiddleName />
                <FormItemMap.LastName />
                <FormItemMap.DateOfBirth />
                <FormItemMap.Gender />
                <FormItemMap.PhoneNumber />
            </FormSection>
            <FormSection title="Address Information">
                <FormItemMap.Nationality />
                <FormItemMap.PlaceOfBirth />
                <FormItemMap.CurrentAddress />
                <FormItemMap.PermanentAddress />
                <FormItemMap.NearestBranch />
            </FormSection>
            <FormSection title="Income Information">
                <FormItemMap.Occupation />
                <FormItemMap.MainSourceOfFunds />
            </FormSection>
            <div
                css={css`
                    margin: 12rem 24rem;
                `}
            >
                {McReminder && (
                    <Markdown
                        components={{
                            h1: ({ children }) => (
                                <div
                                    css={css`
                                        font-weight: 600;
                                        font-size: 14rem;
                                        line-height: 20rem;
                                        letter-spacing: 0%;
                                    `}
                                >
                                    {children}
                                </div>
                            ),
                            p: ({ children }) => (
                                <div
                                    css={css`
                                        font-weight: 400;
                                        font-size: 12rem;
                                        line-height: 16rem;
                                        letter-spacing: 0%;
                                        color: #747378;
                                        margin-top: 16rem;
                                    `}
                                >
                                    {children}
                                </div>
                            ),
                        }}
                    >
                        {McReminder}
                    </Markdown>
                )}
            </div>
            <div
                css={css`
                    box-sizing: border-box;
                    z-index: 100;
                    position: sticky;
                    bottom: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: center;
                    background-color: #ffffff;
                    padding: 16rem 24rem 20rem 16rem;
                `}
            >
                {isSubmitShow.value && (
                    <SubmitButton
                        onClick={() => {
                            methods.handleSubmit(async (data) => {
                                try {
                                    await KycPageSignals.submitKyc(data)
                                    KycPageSignals.nextStage()
                                } catch (error) {
                                    if (error instanceof CustomError) {
                                        logger.debug(error.message)
                                        methods.setError("root", {
                                            message: error.message,
                                        })
                                    }
                                    methods.setError("root", {
                                        // @ts-ignore
                                        message: error.message,
                                    })
                                }
                            })()
                        }}
                    >
                        Submit
                    </SubmitButton>
                )}
            </div>
        </Container>
    )
}

function FormSection(props: { title: string; children: React.ReactNode }) {
    return (
        <div
            css={css`
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                padding: 16rem 24rem;
                background-color: #ffffff;
            `}
        >
            <div
                css={css`
                    font-weight: 600;
                    font-size: 16rem;
                    line-height: 24rem;
                    letter-spacing: 0%;
                    vertical-align: middle;
                    text-transform: capitalize;
                    color: #747378;
                `}
            >
                {props.title}
            </div>
            <div
                css={css`
                    margin-top: 16rem;
                `}
            />
            <div
                css={css`
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    justify-content: flex-start;
                    gap: 16rem;
                `}
            >
                {props.children}
            </div>
        </div>
    )
}
